<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div>
          <!-- 说明和按钮 -->
          <div class="btn_wrapper">
            <span style="font-size: 12px; color: pink"
              >说明：目前支持学科和关键字条件筛选</span
            >
            <el-button
              type="success"
              @click="$router.push('/questions/new')"
              icon="el-icon-edit"
              size="mini"
              >新增试题</el-button
            >
          </div>

          <!-- 表单部分 -->
          <el-form
            ref="form"
            :model="ChoiceForm"
            label-width="80px"
            size="small"
          >
            <el-row :gutter="20" type="flex">
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    v-model="ChoiceForm.subjectID"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="changeSecondLevel"
                  >
                    <el-option
                      v-for="item in subjectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select
                    v-model="ChoiceForm.twoLevelDirectory"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in secondLevel"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select
                    v-model="ChoiceForm.tags"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in tagList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" style="width: 100%">
                  <el-input
                    v-model="ChoiceForm.keyword"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex">
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select
                    v-model="ChoiceForm.questionType"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select
                    v-model="ChoiceForm.difficulty"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select
                    v-model="ChoiceForm.direction"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in directionList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select
                    v-model="ChoiceForm.creatorID"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="超级管理员" value="shanghai"></el-option>
                    <el-option label="录入管理员" value="sdf"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20" type="flex">
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="ChoiceForm.remarks"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input v-model="ChoiceForm.shortName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-select
                    v-model="ChoiceForm.city"
                    style="width: 50%"
                    placeholder="请选择"
                    @change="getAreaList()"
                  >
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="ChoiceForm.province"
                    placeholder="请选择"
                    style="width: 50%"
                  >
                    <el-option
                      v-for="(item, index) in areaList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: right">
                <el-form-item style="margin-left: 80px">
                  <el-button size="small" @click="resetForm">清除</el-button>
                  <el-button size="small" type="primary" @click="searchFn"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <!-- 选项卡 -->
          <el-tabs v-model="activeName" type="card" @tab-click="tableColumn">
            <el-tab-pane label="全部" name="全部"></el-tab-pane>
            <el-tab-pane label="待审核" name="待审核"></el-tab-pane>
            <el-tab-pane label="已审核" name="已审核"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="已拒绝"></el-tab-pane>
          </el-tabs>

          <!-- 数量区域 -->
          <el-alert
            :title="'数据一共'+ counts+'条'"

            type="info"
            show-icon
          ></el-alert>

          <!-- 表格区域 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                {{ scope.row.questionType | questionTypeFormat }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <template slot-scope="scope">
                {{ scope.row.addDate | timeFomat }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="120">
              <template slot-scope="scope">
                {{ scope.row.difficulty | difficultyFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template slot-scope="scope">
                {{ scope.row.chkState | chkStateFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column  label="发布状态" width="120">
              <template slot-scope="scope">
                {{ scope.row | publishStateFormat }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="200"
              @click="previewDialog = true"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="previewFn(scope.row)"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.chkState === 1"
                  @click="isexamineFnn(scope.row.id)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  :disabled="scope.row.publishState === 1"
                  @click="$router.push(`/questions/new?id=${scope.row.id}`)"
                  >修改</el-button
                >
                <el-button type="text" size="small" @click="rackFn(scope.row)">{{scope.row.publishState === 1 ? '下架' : '上架'}}</el-button>

                <el-button type="text" size="small" @click="remove(scope.row)"
                :disabled="scope.row.publishState === 1"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="ChoiceForm.pagesize"
              :current-page="ChoiceForm.page"
              layout=" prev, pager, next, sizes, jumper"
              :total="counts"
            >
            </el-pagination>
          </div>

          <!-- 题目审核弹框 -->
          <el-dialog title="提示" @close="textarea = ''" :visible.sync="isexamine" width="30%">
            <template>
              <el-radio v-model="radio" label="1">通过</el-radio>
              <el-radio v-model="radio" label="2">拒绝</el-radio>
            </template>
            <el-input
              class="textarea"
              type="textarea"
              :rows="2"
              placeholder="请输入审核意见"
              v-model="textarea"
            >
            </el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="isexamine = false">取 消</el-button>
              <el-button type="primary" @click="isExamineFn">确 定</el-button>
            </span>
          </el-dialog>

          <!-- 预览界面 -->
          <el-dialog title="提示" :visible.sync="preview" width="50%">
            <QuestionsC v-if="preview" :new-list="newList"></QuestionsC>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import QuestionsC from '../components/questions-c.vue'
//  导入dayjs
import dayjs from 'dayjs'
// 导入精选题库
import { choice, choiceCheck, remove, choicePublish } from '@/api/hmmm/questions.js'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
// 二级目录
import { simple as Secondsimple } from '@/api/hmmm/directorys'
// 标签数据
import { simple as Tagsimple } from '@/api/hmmm/tags'
// 学科数据
import { simple } from '@/api/hmmm/subjects'
// 导入枚举数据
import {
  questionType,
  difficulty,
  direction,
  chkType,
  publishType

} from '@/api/hmmm/constants'
export default {
  name: 'QuestionsChoice',
  components: {
    QuestionsC
  },
  data () {
    return {
      textarea: '', // 文本域
      radio: '1', // 通过状态
      isexamine: false, // 审核状态
      tableData: [], // 表格数据
      activeName: 'first', // 选项卡绑定数据
      // 绑定数据
      ChoiceForm: {
        page: 1, // 否当前页数
        pagesize: 5, // 每页显示多少
        subjectID: null, // 学科
        keyword: null, // 关键字
        chkState: null // 审核状态
      },
      questionTypeList: [], // 题型列表
      difficultyList: [], // 难度列表
      directionList: [], // 方向列表
      chkTypeList: [], // 审核列表
      subjectOptions: [], // 学科选项
      secondLevel: [], // 二级目录
      tagList: [], // 标签列表
      provincesList: [], // 所有城市
      areaList: [], // 区域列表
      counts: 0, // 数据总条数
      previewDialog: false, // 控制弹框显示隐藏
      showvideo: false, // 答案预览显示隐藏
      chkType, // 审核状态
      preview: false, // 预览界面
      newList: {}, // 传递给子组件 渲染预览界面
      isexamineId: null // 点击审核传的 id

    }
  },

  created () {
    // 调用获取预览数据的方法
    this.handleClick()
    // 调用获取学科列表的方法
    this.getSubject()
    // 调用获取枚举数据的方法
    this.getMjList()
  },
  methods: {
    // 点击下架按钮触发的事件
    async  rackFn (row) {
      const topic = row.publishState === 1 ? '下架' : '上架'
      // 询问提示
      const confirmRes = await this.$confirm(`您确认${topic}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmRes === 'cancel') return

      // 发起上架下架请求 先拼接数据
      row.publishState = row.publishState === 1 ? 0 : 1
      const data = { id: row.id, publishState: row.publishState }
      await choicePublish(data)
      // 提示
      this.$message.success('成功')
    },

    // 点击审核 出现弹框
    isexamineFnn (id) {
      this.isexamine = true
      this.isexamineId = id
    },

    // 审核弹框确定按钮
    async isExamineFn () {
      const isExam = {
        id: this.isexamineId,
        chkState: Number(this.radio),
        chkRemarks: this.textarea
      }
      if (isExam.chkRemarks === '') {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
        return false
      }
      const res = await choiceCheck(isExam)
      this.isexamine = false
      // 调用获取预览数据的方法
      this.handleClick()
      this.$message.success(res.data.success)
    },

    // 预览弹出框
    previewFn (list) {
      this.preview = true
      this.newList = list
    },

    // 搜索功能
    searchFn () {
      // 调用获取预览数据的方法
      this.handleClick()
    },

    // table栏切换
    async tableColumn () {
      // 获取全部数据
      const res = await choice(this.ChoiceForm)

      // 总条数
      this.counts = res.data.counts
      this.tableData = res.data.items
      // 让页面回到第一页
      this.ChoiceForm.page = 1
      // 判断是不是全部
      if (this.activeName === '全部') {
        this.tableData = res.data.items
        this.counts = res.data.counts
      }
      // 筛选待审核数据
      if (this.activeName === '待审核') {
        this.tableData = this.tableData.filter(item => item.chkState === 0)
        this.counts = this.tableData.length
      }
      // 筛选已审核数据
      if (this.activeName === '已审核') {
        this.tableData = this.tableData.filter(item => item.chkState === 1)
        this.counts = this.tableData.length
      }
      // 筛选已拒绝数据
      if (this.activeName === '已拒绝') {
        this.tableData = this.tableData.filter(item => item.chkState === 2)
        this.counts = this.tableData.length
      }
    },

    // 删除
    async remove (row) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该部门, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      // 先判断 tableData 中数组的长度，如果长度等于 1，前面又执行删除，并且删除成功
      await remove(row)
      // 就需要返回上一页
      if (this.tableData.length === 1) {
        // 页码 -1
        this.ChoiceForm.page--
        // 在此判断当前是删除的是不是第一页的最后一条数据，如果是我们需要将页码重置为 1
        if (this.ChoiceForm.page < 1) {
          this.ChoiceForm.page = 1
        }
      }

      this.handleClick()
      this.tableColumn()
      this.$message.success('删除成功')
    },

    // 审核
    async isExamine () {
      if (this.textarea.trim() === '') {
        return this.$message.warning('请输入审核意见')
      }
      await choiceCheck({
        ...this.row,
        chkRemarks: this.textarea,
        chkState: this.radio
      })
      this.isexamine = false
    },

    // 获取预览数据
    async handleClick () {
      const res = await choice(this.ChoiceForm)
      // 拿数据
      this.tableData = res.data.items
      // 得到总条数
      this.counts = res.data.counts
      // 审核状态
      this.chkType = String(res.data.chkType)
    },

    // 获取城市地区
    async getAreaList () {
      const res = citys(this.ChoiceForm.city)
      this.areaList = res
    },

    // 拿二级目录数据
    async changeSecondLevel (subjectID) {
      const res = await Secondsimple({ subjectID })
      this.secondLevel = res.data

      const tagres = await Tagsimple({ subjectID })

      this.tagList = tagres.data
    },

    // 获取学科列表
    async getSubject () {
      const res = await simple()
      this.subjectOptions = res.data
    },

    // 获取枚举数据
    getMjList () {
      // 题型
      this.questionTypeList = questionType
      // 难度
      this.difficultyList = difficulty
      // 方向
      this.directionList = direction
      // 审核
      this.chkTypeList = chkType
      // 城市
      this.provincesList = provinces()
    },

    // 清除数据
    resetForm () {
      this.ChoiceForm = {
        subjectID: null, // 学科
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        chkType: '', // 审核
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: ' ', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业省份
        city: '' // 企业城市
      }
      // 调用获取预览数据的方法
      this.handleClick()
    },
    // 分页方法
    handleSizeChange (newSize) {
      this.ChoiceForm.pagesize = newSize
      this.handleClick()
    },
    handleCurrentChange (newNum) {
      this.ChoiceForm.page = newNum
      this.handleClick()
    }
  },
  // 时间处理
  filters: {
    timeFomat (addDate) {
      return dayjs(addDate).format('YYYY-MM-DD hh:mm:ss')
    },
    //
    questionTypeFormat (value) {
      const res = questionType.find((item) => item.value === Number(value))
      return res.label
    },
    // 审核状态
    chkStateFormat (value) {
      const res = chkType.find((item) => item.value === Number(value))
      return res.label
    },
    // 难度
    difficultyFormat (value) {
      const res = difficulty.find((item) => item.value === Number(value))
      return res.label
    },

    // 发布 状态渲染
    publishStateFormat (row) {
      // console.log(row)
      if (row.chkState === 1 && row.publishState === 0) {
        return '已下架'
      } else {
        const stateName = publishType.find(item => item.value === row.publishState)
        return stateName.label
      }
    }
  }
}
</script>

<style scoped>
/* 分页部分样式 */
.paging {
  display: flex;
  float: right;
}
/* 顶部区域样式 */
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
/* 文本域 */
.textarea {
  margin-top: 30px;
}
</style>
